<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父子组件传值</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 4. 这里是模板,需要绑定一个count,这里的vue属性其实都是属于父组件的,因为这个组件的根div是在父组件中注册的.所以属性值也是相当于在父组件中赋值的而且父组件的值允许传给子组件但是子组件不予许修改父组件传的值 -->
        <counter :count='0' @inc='increase'></counter> <!-- 10. 这里会被出发inc事件,触发这个事件的时候会调用一个increase方法 -->
        <counter :count='0' @inc='increase'></counter>
        <div>{{total}}</div>
    </div>

    <script>
        const val = 2; // 这是要累加的基数

        const counter = { // 1. 创建一个子组件
            props: ['count'],
            template: '<div @click="divClick">{{number}}</div>', // 2. 创建一个模板,使用插值表达式展示值,再添加一个单击事件. 子组件中的模板事件都是在子组件中触发的
            data() { // 6. 这里注意一下,子组件中的data只能是一个方法,并且需要return方法才能返回值
                return {
                    number: this.count // 7. 这里设置一个子组件自己的数据,因为子组件不允许修改父组件传的值,所以这里定一个一个子组件自己的值,值内容就是父组件传过来的数据
                }
            },
            methods: {
                divClick: function () { // 5. 设置单击具体的事件方法
                    this.number = this.number + val; // 8. 每次单击都使组件的值+2
                    this.$emit('inc', val); // 9.并且出发一个事件,并且设置要传的值,触发事件要使用this.$emit('事件名')来指定要触发的事件
                }
            },
        };

        const app = new Vue({
            el: '#app',
            data: {
                total: 0
            },
            components: { // 3. 注册子组件.子组件的标签设定为counter
                counter: counter
            },
            methods: {
                increase: function (pream) { // 11. 因为标签都被父组件注册,所以标签的所有事件都是在父组件中使用, 这里还能接受子组件传过来的值
                    this.total += pream; // 12. 将total+=子组件传递的值并展示
                }
            },
        })
    </script>
</body>

</html>